#set(seoTitle="头像修改")
#@layout()
#define main()
#define css()
<link rel="stylesheet" type="text/css" href="/static/css/user-setting.css">
#end
<!-- 内容区域 -->
<div class="aw-container-wrap">
    <div class="container">
        <div class="row">
            <div class="aw-content-wrap clearfix">
                <div class="aw-user-setting">
                    <div class="tabbable">
                        <ul class="nav nav-tabs aw-nav-tabs active">
                            <li>
                                <a href="/my/setting/verify/">申请认证</a>
                            </li>
                            <li>
                                <a href="/my/setting/security">安全设置</a>
                            </li>
                            <li class="active">
                                <a href="/my/setting/avatar/">头像修改</a>
                            </li>
                            <li>
                                <a href="/my/setting">基本资料</a>
                            </li>
                            <h2>
                                <i class="icon icon-setting"></i>用户设置
                            </h2>
                        </ul>
                    </div>
                    <div class="tab-content clearfix">
                        <!-- 基本信息 -->
                        <div class="aw-mod">
                            <div class="mod-body">
                                <div class="aw-mod mod-base">
                                    <form id="avatar_upload_form" action="/my/setting/uploadAvatar" method="POST"
                                          enctype="multipart/form-data">
                                        <input type="hidden" name="user.uid" value="#(userMsg.uid??)"/>
                                        <table width="100%">
                                            <tbody>
                                            <tr>
                                                <td style="width: 38%; text-align: right; padding-right: 15px;">
                                                    图片文件(不能超过1024k)：
                                                </td>
                                                <td style="width: 40%;"><input type="file" name="avatar"
                                                                               style="width: 90%;"></td>
                                                <td><input id="upload_btn" type="submit" value="上传"
                                                           style="font-weight:bold; padding:0 11px 0 9px;"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <img alt="用户头像" src="/upload/avatar/#(userMsg.avatar??)"
                                             style=" padding-top: 30px; margin-left:35%;">
                                    </form>
                                </div>

                                <!-- 图像预览与裁切区域 -->
                                <div class="avatar-preview-crop-box">
                                    <img id="jcrop_target"/>
                                </div>

                                <!-- 图像裁切参数保存区域 -->
                                <div id="avatar_save_box" class="avatar-crop-data-save-box">
                                    <form id="avatar_save_form" action="/my/setting/saveAvatar" method="post">
                                        <input type="hidden" id="x" name="x"/>
                                        <input type="hidden" id="y" name="y"/>
                                        <input type="hidden" id="width" name="width"/>
                                        <input type="hidden" id="height" name="height"/>
                                        <input id="avatar_save_btn" type="submit" value="保存选中区域"
                                               style="padding:2px 10px; font-weight:bold;"/>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 内容区域end -->
#end

#define js()
<script type="text/javascript" src="/static/jquery_form/jquery.form.min.js"></script>
<script type="text/javascript" src="/static/layer/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/apppublic.js"></script>
<link  rel="stylesheet" type="text/css" href="/static/jcrop/css/jquery.Jcrop.min.css">
<script type="text/javascript" src="/static/jcrop/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
    // 使用 ajax form 提交图像裁剪坐标
    $(document).ready(function () {
        // ajaxForm 可以是无参或者一个参数，参数只能是一个回调或json options，支持 jquery $.ajax的所有参数
        $("#avatar_upload_form").ajaxForm({
            dataType: "json",
            // 在对表单域进行序列化之前回调
            beforeSerialize: function ($form, options) {
            },
            // 这里可做一些 validator的工作，必须要返回 false 才不会提交表单
            beforeSubmit: function (formData, jqForm, options) {
                var uploadBtn = $("#upload_btn");
                uploadBtn.attr("disabled", true);
                uploadBtn.val("正在上传，请稍候...");
                return true;
            },
            success: function (ret) {
                if (ret.state == "ok") {
                    var jcropTarget = $("#jcrop_target");
                    jcropTarget.attr("src", ret.avatarUrl + "?r=" + Math.random());
                    jcropTarget.show();
                    callJcrop();
                    $("#upload_btn").hide();
                    $("#avatar_save_box").show();
                } else {
                    showErrorMsg(ret.msg);
                    var uploadBtn = $("#upload_btn");
                    uploadBtn.val("上传");
                    uploadBtn.attr("disabled", false);
                }
            },
            error: function (ret) {  // 仅做为示例，只要后端是 status 200，就不会调用
                showErrorMsgImg(ret.msg);
            }
        });
    });

    function callJcrop() {
        $('#jcrop_target').Jcrop({
            setSelect: [30, 30, 250, 250],
            minSize: [30, 30],
            aspectRatio: 1,
            onSelect: updateCoords,
            onChange: updateCoords
        });
    }
    function updateCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#width').val(c.w);
        $('#height').val(c.h);
    }
    // 使用 ajax form 提交图像裁剪坐标
    $(document).ready(function () {
        $("#avatar_save_form").ajaxForm({
            dataType: "json",
            beforeSubmit: function (formData, jqForm, options) {
            },
            success: function (ret) {
                $("#working_box").hide();
                if (ret.state == "ok") {
                    showOkMsgImg(ret.msg);
                } else {
                    showErrorMsgImg(ret.msg);
                }
            },
            error: function (ret) {
                showErrorMsgImg(ret.msg);
            }
        });
    });
    function showOkMsgImg(msg) {
        layer.msg(msg, {
                shift: 0
                , shade: 0.4
                , time: 0
                , offset: "140px"
                , closeBtn: 1
                , shadeClose: false
                ,maxWidth: "1000"
            }, function () {
                location.href = "/my/setting/avatar";
            }
        );
    }
    function showErrorMsgImg(msg) {
        layer.msg(msg, {
                shift: 6
                , shade: 0.4
                , time: 0
                , offset: "140px"
                , closeBtn: 1
                , shadeClose: true
                ,maxWidth: "1000"
            }, function () {}
        );
    }
</script>
#end